<template>
  <div class="user-info-desc">
    <a-descriptions :title="$t('all.autotext1287.1')" :column="3">
      <a-descriptions-item :label="$t('all.autotext1442')">
        <a-avatar :size="32" :src="userInfo.headimg | dealImageUrl" :alt="$t('all.autotext618')"/>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext551')">
        {{ userInfo.account }}
        <a v-copy="userInfo.account" style="margin-left: 10px">{{ $t('all.autotext1285') }}</a>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext902')">
        {{ userInfo.pinCode }}
        <a v-copy="userInfo.pinCode" style="margin-left: 10px">{{ $t('all.autotext1285') }}</a>
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext44')">
        {{ userInfo.email || $t('all.autotext1238') }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext709')">
        {{ userInfo.phone | formatPhone }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext977')">
        {{ userInfo.name }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext981')">
        {{ userInfo.birthday }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext1359')">
        {{ userInfo.idCard | formatIdCard }}
        <a v-if="userInfo.verifiedStatus != 1" style="margin-left:15px" @click="handleAuthValid">{{ $t('all.autotext1341') }}</a>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import { updatePersonDetail } from '@api/account/person'

export default {
  name: 'UserInfoDesc',
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    handleAuthValid () {
      const { name, idCard, birthday, phone } = this.userInfo
      const params = {
        name,
        idCard,
        birthday,
        phone
      }
      updatePersonDetail(params).then(res => {
        if (res.status === true) {
          this.$notification.success({
            message: this.$t('all.autotext365')
          })
          this.getUserDetail()
        } else {
          this.$notification.error({
            message: this.$t('all.autotext40'),
            description: this.$t('all.autotext1002')
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
